<template>
	<view>
		<view class="sticky-box" style="width: 100%;margin: 0 auto;display: flex;text-align: center;line-height: 96rpx;background-color: #F4F1F1;">
			<view @click="zuixin(0)" style="flex: 1;position: relative;" :class="zui==0?'actives':'as'">
				全部
				<image v-if="zui==0"
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png"
					style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"
					mode=""></image>
			</view>
			<view @click="zuixin(1)" style="flex: 1;position: relative;" :class="zui==1?'actives':'as'">
				待领取
				<image v-if="zui==1"
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"
					mode=""></image>
			</view>
			<view @click="zuixin(2)" style="flex: 1;position: relative;" :class="zui==2?'actives':'as'">
				待使用
				<image v-if="zui==2"
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"
					mode=""></image>
			</view>

			<view @click="zuixin(3)" style="flex: 1;position: relative;" :class="zui==3?'actives':'as'">
				已使用
				<image v-if="zui==3"
					src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"
					mode=""></image>
			</view>

		</view>

		<view v-for="(item,index) in list" :key='index' style="width: 92%;margin: 30rpx auto;position: relative;">
			<view style="overflow: hidden;background-color: #ffffff;border-radius: 16rpx;box-sizing: border-box;padding-right: 160rpx;position: relative;">
				<view style="width: 100%;box-sizing: border-box;overflow: hidden;border-radius: 16rpx;border-right: 1px dashed #C0C0C0;">
					<view style="overflow: hidden;width:100%;padding: 40rpx 20rpx 0;box-sizing: border-box;">
						<view style="float: left;width: 204rpx;position: relative;">
							<view v-if="item.client_coupon==''">
								<image v-if="zui!=3" style="width:204rpx;height: 110rpx;" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220610/04265fdb321fe7788a297e4d5bafb56f.png" alt="">
								<image v-if="zui==3" style="width:204rpx;height: 110rpx;" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220613/175b03394698f7032c2b28499934e940.png" alt="">
								<view v-if="zui!=3">
									<view style="overflow: hidden;position: absolute;top: 0rpx;left: 10rpx;width: 184rpx;height: 80rpx;">
										<view style="width: 30%;float: left;text-align: center;position: relative;">
											<text style="color: #755C46;font-size: 60rpx;font-weight: 600;">{{item.number || ''}}</text>
											<text style="display: inline-block;width: 26rpx;height: 26rpx;line-height: 30rpx;border: 1px solid #FEDEAA;text-align: center;background-color: #755C46;border-radius: 50%;color: #FEDEA9;font-size: 14rpx;position: absolute;bottom:0;left: 50%;">
												{{item.text || ''}}
											</text>
										</view>
										<view style="width: 70%;float: left;text-align: center;box-sizing: border-box;padding: 30rpx 0 10rpx;">
											<view style="line-height: 20rpx;font-size: 16rpx;color: #755C46;" class="yihang">
												{{item.title || ''}}
											</view>
											<view style="line-height: 20rpx;font-size: 10rpx;color: #755C46;">
												dong xian gang
											</view>
										</view>
									</view>
									<view style="position: absolute;color: #755C46;font-size: 10rpx;bottom: 14rpx;right: 20rpx;">
										最终解释权归平台所有
									</view>
								</view>
								<view v-if="zui==3">
									<view style="overflow: hidden;position: absolute;top: 0rpx;left: 10rpx;width: 184rpx;height: 80rpx;">
										<view style="width: 30%;float: left;text-align: center;position: relative;">
											<text style="color: #999999;font-size: 60rpx;font-weight: 600;">{{item.number}}</text>
											<text style="display: inline-block;width: 26rpx;height: 26rpx;line-height: 30rpx;border: 1px solid #999999;text-align: center;background-color: #999999;border-radius: 50%;color: #FFFFFF;font-size: 14rpx;position: absolute;bottom:0;left: 50%;">
												{{item.text || ''}}
											</text>
										</view>
										<view style="width: 70%;float: left;text-align: center;box-sizing: border-box;padding: 30rpx 0 10rpx;">
											<view style="line-height: 20rpx;font-size: 16rpx;color: #999999;" class="yihang">
												{{item.title || ''}}
											</view>
											<view style="line-height: 20rpx;font-size: 10rpx;color: #999999;">
												dong xian gang
											</view>
										</view>
									</view>
									<view style="position: absolute;color: #999999;font-size: 10rpx;bottom: 14rpx;right: 20rpx;">
										最终解释权归平台所有
									</view>
								</view>
							</view>
							<view v-if="item.client_coupon!=''">
								<image v-if="item.client_coupon.status==1" style="width:204rpx;height: 110rpx;" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220610/04265fdb321fe7788a297e4d5bafb56f.png" alt="">
								<image v-if="item.client_coupon.status==2" style="width:204rpx;height: 110rpx;" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220613/175b03394698f7032c2b28499934e940.png" alt="">
								<view v-if="item.client_coupon.status==1">
									<view style="overflow: hidden;position: absolute;top: 0rpx;left: 10rpx;width: 184rpx;height: 80rpx;">
										<view style="width: 30%;float: left;text-align: center;position: relative;">
											<text style="color: #755C46;font-size: 60rpx;font-weight: 600;">{{item.number}}</text>
											<text style="display: inline-block;width: 26rpx;height: 26rpx;line-height: 30rpx;border: 1px solid #FEDEAA;text-align: center;background-color: #755C46;border-radius: 50%;color: #FEDEA9;font-size: 14rpx;position: absolute;bottom:0;left: 50%;">
												{{item.text || ''}}
											</text>
										</view>
										<view style="width: 70%;float: left;text-align: center;box-sizing: border-box;padding: 30rpx 0 10rpx;">
											<view style="line-height: 20rpx;font-size: 16rpx;color: #755C46;" class="yihang">
												{{item.title || ''}}
											</view>
											<view style="line-height: 20rpx;font-size: 10rpx;color: #755C46;">
												dong xian gang
											</view>
										</view>
									</view>
									<view style="position: absolute;color: #755C46;font-size: 10rpx;bottom: 14rpx;right: 20rpx;">
										最终解释权归平台所有
									</view>
								</view>
								<view v-if="item.client_coupon.status==2">
									<view style="overflow: hidden;position: absolute;top: 0rpx;left: 10rpx;width: 184rpx;height: 80rpx;">
										<view style="width: 30%;float: left;text-align: center;position: relative;">
											<text style="color: #999999;font-size: 60rpx;font-weight: 600;">{{item.number}}</text>
											<text style="display: inline-block;width: 26rpx;height: 26rpx;line-height: 30rpx;border: 1px solid #999999;text-align: center;background-color: #999999;border-radius: 50%;color: #FFFFFF;font-size: 14rpx;position: absolute;bottom:0;left: 50%;">
												{{item.text || ''}}
											</text>
										</view>
										<view style="width: 70%;float: left;text-align: center;box-sizing: border-box;padding: 30rpx 0 10rpx;">
											<view style="line-height: 20rpx;font-size: 16rpx;color: #999999;" class="yihang">
												{{item.title || ''}}
											</view>
											<view style="line-height: 20rpx;font-size: 10rpx;color: #999999;">
												dong xian gang
											</view>
										</view>
									</view>
									<view style="position: absolute;color: #999999;font-size: 10rpx;bottom: 14rpx;right: 20rpx;">
										最终解释权归平台所有
									</view>
								</view>
							</view>
						</view>
						<view style="float: right;width: 56%;color: #333333;font-size: 28rpx;line-height: 40rpx;" class="erhang">
							{{item.main_content || ''}}
						</view>
					</view>
					<view style="width: 100%;height: 50rpx;line-height: 50rpx;color: #755C46;font-size: 22rpx;margin-top: 20rpx;background-color: #F9F7F5;box-sizing: border-box;padding-left: 20rpx;">
						有效期：{{item.use_action_time_text || ''}}至{{item.use_end_time_text || ''}}
					</view>
				</view>
				<view v-if="item.client_coupon==''">
					<view :class="zui==3?'lingqu1':'lingqu'" @click="ling(item.id)">
						去领取
					</view>

				</view>
				<view v-if="item.client_coupon!=''">
					<view :class="item.client_coupon.status==2?'lingqu1':'lingqu'" @click="shiyong(item.client_coupon.id)">
						去使用
					</view>
				</view>
				<view v-if="item.client_coupon==''">
					<view :class="zui==3?'zhekou1':'zhekou'">
						{{item.title || ''}}
					</view>
				</view>
				<view v-if="item.client_coupon!=''">
					<view :class="item.client_coupon.status==2?'zhekou1':'zhekou'">
						{{item.title || ''}}
					</view>
				</view>
				<!-- <text v-if="item.client_coupon==''">
					<text :class="zui==3?'wei1':'wei'">
						{{item.client_coupon.status_text || ''}}
					</text>
				</text> -->
				<text v-if="item.client_coupon!=''">
					<text :class="item.client_coupon.status==2?'wei1':'wei'">
						{{item.client_coupon.status_text || ''}}
					</text>
				</text>

			</view>
		</view>

		<view v-if="kk" style="text-align: center;margin-top: 50rpx;">
			<image src="https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220406/9f0a29c5b79b0296d72cf8f5bb77f5c2.png" style="width: 60%" mode="widthFix"></image>
		</view>
		<view v-if="enmpy && list.length!=0" style="font-size: 28rpx;color: #C0C0C0;text-align: center;line-height: 60rpx;width: 100%;padding-bottom: 40rpx;">
			已经到底了！
		</view>
		<model ref="model"/>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				zui:0,
				page: 1,
				kk:false,
				enmpy: false,
				list:[],
			}
		},
		onShow(option) {
			this.page= 1
			this.kk=false
			this.enmpy= false
			this.list=[]
			this.huoqu()
		},
		onReachBottom: function() {
			if (this.enmpy) {
				return
			} else {
				this.huoqu()
			}
		},
		methods:{
			zuixin:function(index){
				this.zui=index
				this.page= 1
				this.kk=false
				this.enmpy= false
				this.list=[]
				this.huoqu()
			},
			// 获取优惠券
			huoqu:function(){
				this.post('api/coupon/user_coupon',{page:this.page,limit:10,status:this.zui},true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(this.page==1){
							if (res.data== null || res.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data== null || res.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.length < 10) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			// 使用
			shiyong:function(id){
				let data={
					id:id
				}
				let that=this
				this.post('api/coupon/use_coupon',data,true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						this.page= 1
						this.kk=false
						this.enmpy= false
						this.list=[]
						this.huoqu()
						return
						if(type==1){
							this.page= 1
							this.kk=false
							this.enmpy= false
							this.list=[]
							this.huoqu()
						}else{
							that.post('api/client/info', '', true).then(res=>{
								if(res.data.degree==100){
									uni.navigateTo({
										url:'vip'
									})
								}else{
									this.$refs.model.open()
								}
							})

						}
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			ling:function(id){
				let data={
					id:id
				}
				this.post('api/coupon/get',data,true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						this.page= 1
						this.kk=false
						this.enmpy= false
						this.list=[]
						this.huoqu()
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.actives{
		color: #000000;
		font-size: 30rpx;
		opacity: 1;
	}
	.as{
		color: #000000;
		font-size: 30rpx;
		opacity: 0.7;
	}
	.zhekou{
		height: 28rpx;
		background:url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220610/7b5a99d12d219862ac4ea162e5b41dc3.png) no-repeat;
		background-size: 100%;
		width: 93rpx;
		position: absolute;
		top: 0;
		left: 60rpx;
		text-align: center;
		line-height: 28rpx;
		font-size: 18rpx;
		color: #fff;
	}
	.zhekou1{
		height: 28rpx;
		background:url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220613/e5f8f166a2133f10a7243610afa45b02.png) no-repeat;
		background-size: 100%;
		width: 93rpx;
		position: absolute;
		top: 0;
		left: 60rpx;
		text-align: center;
		line-height: 28rpx;
		font-size: 18rpx;
		color: #fff;
	}
	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */
		position: sticky;
		top: var(--window-top);
		z-index: 10;
		flex-direction: row;
		margin: 0px;
		// padding: 15px 0 15px 0;
		// background-color: #F4F5F6;
		// border-bottom-style: solid;
		// border-bottom-color: #E2E2E2;
	}
	page{
		background-color: #F4F1F1!important;
		padding-bottom: 30rpx;
		font-family: Demibold;
	}
	.lingqu{
		width: 120rpx;
		height: 50rpx;
		background: #1fb0ac;
		border-radius: 25rpx;
		color: #fff;
		font-size: 20rpx;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		text-align: center;
		line-height: 50rpx;
	}
	.lingqu1{
		width: 120rpx;
		height: 50rpx;
		background: #E2E2E2;
		border-radius: 25rpx;
		color: #999999;
		font-size: 20rpx;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		text-align: center;
		line-height: 50rpx;
	}
	.wei{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		font-size: 20rpx;
		color: #1fb0ac;
		padding: 6rpx 20rpx;
		background: #E5EFFF;
		border-radius: 0px 16rpx 0px 16rpx;
	}
	.wei1{
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		font-size: 20rpx;
		color: #999999;
		padding: 6rpx 20rpx;
		background: #E2E2E2;
		border-radius: 0px 16rpx 0px 16rpx;
	}
</style>